<template>
    <div>
        <div class="top">
            <div class="copy top_box" @click="$navigate.to('/pages/create/copyTip')">
                <div>复制文章|视频</div>
                <p>复制链接获取内容</p></p>
                <image src="/static/images/copy_article.png" mode="" />
            </div>
            <div class="write top_box" @click="$navigate.to('/pages/create/write')">
                <div>写文章</div>
                <p>自己排版文章</p>
                <image src="/static/images/write_article.png" mode="" />
            </div>
        </div>
        <!-- <div class="cell-box" @click="$navigate.to('/pages/user/myMaterial')"> -->
        <div class="cell-box" @click="$navigate.back()">
            <image src="/static/images/edit.png" mode="" />
            <div class="info">
                <p>我的素材</p>
                <span>我创建的、复制的文章|视频</span>
            </div>
            <i class="icon-arrow-right fs26 color-ccc mar-r20"></i>
        </div>
        <div class="cell-box" @click="$navigate.to('/pages/create/draft')">
            <image src="/static/images/draft.png" mode="" />
            <div class="info">
                <p>草稿箱(0)</p>
                <span>未编辑完成的文章在这里</span>
            </div>
            <i class="icon-arrow-right fs26 color-ccc mar-r20"></i>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.top{
    display: flex;
    justify-content: space-between;
    padding: 30rpx;
    .top_box{
        width: 332rpx;
        height: 240rpx;
        border-radius: 20rpx;
        color: #fff;
        padding: 20rpx 30rpx 0;
        div{
            font-size: 32rpx;
            font-weight: bold;
            line-height: 40rpx;
        }
        p{
            font-size: 28rpx;  
            margin-top: 16rpx;
            line-height: 30rpx;
        }
        image{
            width: 128rpx;
            height: 108rpx;
            margin: 26rpx 0 0 160rpx;
        }
        &.copy {
            .gradient(#589eff,#6aa9ff, 180deg)
        }
        &.write {
            .gradient(#fc5159,#ff625f, 180deg)
        }   
    }
}
.cell-box{
    width: 690rpx;
    background: #fff;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    margin: 0 auto 30rpx;
    height: 160rpx;
    image{
        width: 120rpx;
        height: 120rpx;
        margin: 0 10rpx;
    }
    .info{
        flex: 1;
        p{
            font-size: 34rpx;
            font-weight: bold;
        }
        span{
            display: block;
            font-size: 30rpx;
            color: #aaa;
            margin-top: 10rpx;
        }
    }

}
</style>